<template>
    <configCompositionTwoWindowStyle :leftWidth="16" :rightWidth="8" class="black-red">
        <template slot="card">
            <search
                    @add="addBlackList"
                    @refresh="refreshList"
                    @search="searchByName"
                    @turnPage="turnPage"
                    :currentPage="currentPage"
                    :count="count || 0"
                    :pageSize="pageSize"
                    :forCall="true"
                    :reload="reloadPbx"
                    :showAdvSearch="false"
                    :isShowInput="false"
                    @roloadIvrSucc="roloadIvrSucc"
                    >
            </search>
            <div style="border-top:1px solid #d9d9d9;">
                <el-row :gutter="20" style="padding:6px 10px;margin:0;">
                    <el-col :span="12">
                        <el-select size="mini" v-model="PBX" :placeholder="$t('public.pleasePick')" style="width:100%;" @change="changePBX">
                            <el-option
                                    :label="$t('public.all')"
                                    :value="''">
                            </el-option>
                            <el-option
                                    v-for="(item,index) in pbxs"
                                    :label="item.NickName + ' (' +item.PBX + ')'"
                                    :value="item.PBX"
                                    :key="index">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="12">
                        <el-input
                                :placeholder="$t('channelsettings.redBlack4')"
                                size="mini"
                                class="condition"
                                v-model="searchContent"
                                @keyup.enter.native="searchByName"
                                >
                          <i
                            class="el-input__icon el-icon-search"
                            slot="suffix"
                            @click="searchByName">
                          </i>
                        </el-input>
                    </el-col>
                </el-row>
            </div>
            <black-red-table :tableHeader="tableHeader" :tableData="tableData" @resh='queryList' @editBlackRedList="editBlackRedList" @reload="reload"></black-red-table>
        </template>
        <template slot="detail">
            <breadCrumb v-show="isShowDetail" :titleArr="titleArr" @back="cancle"></breadCrumb>
            <black-list-detail  v-show='isShowDetail' :lastAllBlackRedList="lastAllBlackRedList" :currentData="currentData" :showBread="showBread" @resh='queryList'  @cancle="cancle" @reload="reload"></black-list-detail>
        </template>
    </configCompositionTwoWindowStyle>
</template>
<script>
    import configCompositionTwoWindowStyle from '@/components/ui-modules/config/configCompositionTwoWindowStyle'
    import search from '../base/search'
    import BlackRedTable from './BlackRedTable.vue'
    import BlackListDetail from './BlackListDetail.vue'
    import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
    import {ivrSearch, deepClone} from '@/utils/m7Utils.js'
    export default {
      name: 'BlackRedList',
      data () {
        return {
          currentPage: 1,    //   当前页
          pageSize: 10,    //
          count: 0,    //
          tableHeader: [
            {prop: 'BlackNum', label: this.$t('channelsettings.redBlack2')},
            {prop: 'TypeName', label: this.$t('channelsettings.redBlack1')},
            {prop: 'Memo', label: this.$t('public.remark')},
            {prop: 'UpdateTime', label: this.$t('config.channel.lastUpdateTime')},
            {prop: 'PBX', label: 'PBX'},
            {prop: '', label: this.$t('sms.operate')}
          ],                        //   自定义 表头
          isShowDetail: false, //   是否要展示右边
          tableData: [],
          showBread: 'addBlackRedList',
          allBlackRedList: [],
          currentData: {},
          emptyFrom: {_id: '', BlackNum: '', Type: '', Memo: '', PBX: this.$store.state.session.user.pbx, TypeName: ''},
          reloadPbx: true,
          searchContent: '',
          pbxs: [],
          PBX: '',
          lastAllBlackRedList: [],
          titleArr: [this.$t('config.channel.blackRedList'), this.$t('config.channel.addBlackRedList')]
        }
      },
      components: {
        configCompositionTwoWindowStyle,
        search,
        BlackRedTable,
        BlackListDetail,
        breadCrumb
      },
      methods: {
        changePBX (pbx) {
          this.isShowDetail = false
          this.searchContent = ''
          this.currentPage = 1
          this.queryList(pbx, 'searchPbx')
        },
        roloadIvrSucc () {
          this.reloadPbx = true
        },
        reload (flag) { // 生效可以点击
          this.reloadPbx = flag
        },
        searchByName (val) { // 根据名字本地搜索
          this.isShowDetail = false
          this.currentPage = 1
          this.queryList()
//          let searchResult = ivrSearch(this.allBlackRedList, this.searchContent, ['BlackNum']) || []
//          this.tableData = searchResult
        },
        cancle () {
          this.isShowDetail = false
        },
        refreshList () {
          this.searchContent = ''
          this.PBX = ''
          this.currentPage = 1
          this.queryList()
        },
        turnPage (val) {
          this.currentPage = val
          this.queryList()
        },
        queryList (pbx, searchPbx) { // 获取列表或者是刷新列表
          let data = {}
          data.Account = this.$store.state.session.account.account
          if (pbx) {
            if (pbx === 'isNeedPbx') {
              this.getAllBlacklist()
              if (this.PBX) {
                data.PBX = this.PBX
              }
            } else {
              data.PBX = pbx
            }
          }
          data.BlackNum = this.searchContent
          data.limit = this.pageSize
          data.page = this.currentPage
          this.$store.dispatch('queryBlackNum', data).then(resp => {
            if (resp && resp.success) {
              this.isShowDetail = false
              if (!data.PBX) { // 把没有带着pbx搜索的数据存储起来用于排重
//                this.lastAllBlackRedList = resp.list
              }
              this.allBlackRedList = resp.list // 用于搜素
              this.count = resp.count
              this.getNewTableData(resp.list, pbx, searchPbx)
            } else {
              this.$message.error(this.$t('channelsettings.redBlack5'))
            }
          })
        },
        getNewTableData (data, pbx, searchPbx) {
          let newArr = []
          for (let i = 0; i < data.length; i++) {
            if (data[i].Type === '0') {
              data[i].TypeName = this.$t('channelsettings.redBlack6')
            } else if (data[i].Type === '1') {
              data[i].TypeName = this.$t('channelsettings.redBlack7')
            } else {
              data[i].TypeName = this.$t('channelsettings.redBlack8')
            }
            if (searchPbx === 'searchPbx') { // 更改pbx时
              if (pbx) {
                if (data[i].PBX === pbx) {
                  newArr.push(data[i])
                }
              } else { // 全选时
                newArr.push(data[i])
              }
            }
          }
          if (searchPbx === 'searchPbx') { // 先根据pbx筛选，然后根据名字再筛选一遍
            let searchResult = ivrSearch(newArr, this.searchContent, ['BlackNum']) || []
            this.tableData = searchResult
          } else {
            this.tableData = data
          }
        },
        addBlackList () { // 添加黑红名单
          this.isShowDetail = true
          this.showBread = 'addBlackRedList'
          this.titleArr.splice(1, 1, this.$t('config.channel.addBlackRedList'))
          this.currentData = deepClone(this.emptyFrom)
        },
        editBlackRedList (val) { // 编辑黑红名单
          this.currentData = deepClone(val)
          this.isShowDetail = true
          this.showBread = 'editBlackRedList'
          this.titleArr.splice(1, 1, this.$t('config.channel.editBlackRedList'))
        },
        getAllBlacklist () {
          //        用于黑名单排重
          let data = {}
          data.Account = this.$store.state.session.account.account
          this.$store.dispatch('queryBlackNum', data).then(resp => {
            if (resp && resp.success) {
              this.lastAllBlackRedList = resp.list
            }
          })
        }
      },
      beforeMount () {
        this.getAllBlacklist()
        this.queryList()
        this.pbxs = this.$store.state.session.account.pbx
      }
    }
</script>
<style lang="stylus" scoped>
    @import "../../../../../assets/common.styl"
</style>
